<template>
  <div ref="chartContainer" :style="{ width: width, height: height }"></div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";

// 接收的props
const props = defineProps({
  width: {
    type: String,
    default: "400px",
  },
  height: {
    type: String,
    default: "400px",
  },
});

const chartContainer = ref(null);

// 初始数据
const initialData = {
  xAxisData: ["一处室", "二处室", "三处室", "四处室", "五处室"],
  seriesData: [
    {
      name: "接口订阅量",
      type: "line",
      data: [120, 200, 130, 150, 190],
      symbol: "circle",
      symbolSize: 8,
    },
    {
      name: "接口调用量",
      type: "line",
      data: [180, 70, 130, 50, 110],
      symbol: "circle",
      symbolSize: 8,
    },
  ],
};

onMounted(() => {
  const chart = echarts.init(chartContainer.value);
  const option = {
    color: ["#1890ff", "#33cc33"],
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "category",
      data: initialData.xAxisData,
    },
    yAxis: {
      type: "value",
      name: "单位: 个",
      min: 0,
    },
    series: initialData.seriesData,
  };
  chart.setOption(option);
});
</script>

<style scoped></style>
